<script lang="ts" setup>
import GoodsCharts from './GoodsCharts.vue'
import {ref} from "vue";
import {orderOrdertotal} from "../../api/total";

const date = ref([])

async function getData() {
  let res = await orderOrdertotal({date: JSON.stringify(date.value)})
}
</script>
<template>
  <div class="totalGoods">
    <el-card>
      <div class="searchForm">
        <span class="label">日期范围</span>
        <!-- 日期选择器 -->
        <el-date-picker
            v-model="date"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            class="date-picker"
            end-placeholder="结束日期"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
        >
        </el-date-picker>
        <!-- 按钮 -->
        <el-button type="primary" @click="getData" size="small">查询</el-button>
      </div>
      <goods-charts id="test"></goods-charts>
    </el-card>
  </div>
</template>
<style lang="scss" scoped>
.searchForm {
  display: flex;
  align-items: center;
}

.label {
  font-size: 12px;
  color: #666;
}

.date-picker {
  margin: 0 10px;
}

#test {
  margin-top: 30px;
}
</style>